<template>
    <div class="template-wrapper">
        <!-- 左侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-content">
                <div 
                    class="menu-item" 
                    v-for="item in templateType"
                    :key="item.value"
                    :class="{ active: activeMenu === item.value }"
                    @click="handleMenuClick(item.value)"
                >
                    <SettingOutlined v-if="activeMenu === item.value" />
                    <span>{{ item.label }}</span>
                </div>
            </div>
        </aside>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 内容区域 -->
            <div class="content-area">
                <!-- Test Report Template 内容 -->
                <ReportTemplateComponent v-if="activeMenu === 1" />

                <!-- Automated testing 内容 -->
                <AutomatedComponent v-if="activeMenu === 2" />

                <!-- Alarm 内容 -->
                <AlarmComponent v-if="activeMenu === 3" />
            </div>
        </main>


    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { 
    SettingOutlined
} from '@ant-design/icons-vue';
import { templateType } from '@/libs/enums';
import AutomatedComponent from './components/Automated/index.vue';
import AlarmComponent from './components/Alarm/index.vue';
import ReportTemplateComponent from './components/ReportTemplate/index.vue';
import './index.scss';

// 定义组件属性
defineOptions({
    name: 'TemplatePage',
    path: '/template',
    async: true
});

// 响应式数据
const activeMenu = ref(1); // 默认选中第一个菜单项



// 方法
const handleMenuClick = (menuKey) => {
    activeMenu.value = menuKey;
};

// 生命周期
onMounted(() => {
    // 初始化数据
});
</script>